<template>
  <div>
  <div class="Rmanage">
   <div style="width:20vw" ref="rm_right"  class="rm_right"></div>
  <div style="width:auto;padding-left:2vw;" ref="rm_left" class="rm_left">
    <div class="rm_left_head">
        <h1 class="iconfont">资源管理</h1>
      </div>
    <div class="rm_leftMain">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="实时资讯" name="first">
          <el-table
              :data="
                realtimeList
              "
              style="width: 100%"
              max-height="400"
              border
            >
              <el-table-column fixed label="编号" prop="id"> </el-table-column>
              <el-table-column label="标题" prop="title"> </el-table-column>
              <el-table-column  width="180" align="center" label="类别">
                <template #default="scope">
                  <el-tag v-for="(item,index) in scope.row.tag" :key="index" :type="'success'">
                  {{ item!='' ? item :'未分类' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column align="right" fixed="right" width="250">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="按标题、编号、类别搜索"
                  >
                  <el-button @click.native="vague_Search('realtimes')" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,'realtimes')" icon="el-icon-edit">编辑</el-button>
                   <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row,'realtimes')" icon="el-icon-delete"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalRealtime" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
        </el-tab-pane>
        <el-tab-pane label="政策咨讯" name="second">
          <el-table
              :data="
                policyList
              "
              style="width: 100%"
              max-height="400"
              border
            >
              <el-table-column fixed label="编号" prop="id"> </el-table-column>
              <el-table-column label="标题" prop="title"> </el-table-column>
              <el-table-column  width="180" align="center" label="类别">
                <template #default="scope">
                  <el-tag v-for="(item,index) in scope.row.tag" :key="index"  :type="'success'">
                  {{ item!='' ? item :'未分类' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column align="right" fixed="right" width="250">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="按标题、编号、类别搜索"
                  >
                  <el-button @click.native="vague_Search('policy')" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,'policy')" icon="el-icon-edit">编辑</el-button>
                   <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row,'policy')" icon="el-icon-delete"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalPolicy" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
        </el-tab-pane>
        <el-tab-pane label="课程资讯" name="third">
           <el-table
              :data="
                subjectList
              "
              style="width: 100%"
              max-height="400"
              border
            >
              <el-table-column fixed label="编号" prop="id"> </el-table-column>
              <el-table-column label="标题" prop="title"> </el-table-column>
              <el-table-column align="center" label="缩略图">
                <template #default="scope">
                        <el-image
                            class="table-td-thumb"
                            :src="scope.row.img"
                            :preview-src-list="[scope.row.img]"
                        ></el-image>
                </template>
              </el-table-column>
              <el-table-column  width="180" align="center" label="类别">
                <template #default="scope">
                  <el-tag :type="'success'">
                  {{ scope.row.tag.length>=3 ? scope.row.tag[0]: '未分类' }}
                  </el-tag>
                  <el-tag v-show="scope.row.tag.length>=3">{{scope.row.tag[1]}}</el-tag>
                  <el-tag v-show="scope.row.tag.length>=3">{{scope.row.tag[2]}}</el-tag>
                </template>
              </el-table-column>
              <el-table-column align="right" fixed="right" width="250">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="按标题、编号、类别搜索"
                  >
                  <el-button @click.native="vague_Search('subject')" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,'subject')" icon="el-icon-edit">编辑</el-button>
                   <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row,'subject')" icon="el-icon-delete"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalSubject" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
        </el-tab-pane>
        <el-tab-pane label="百科常识" name="fourth">
          <el-table
              :data="
                nousList
              "
              style="width: 100%"
              max-height="400"
              border
            >
              <el-table-column fixed label="编号" prop="id"> </el-table-column>
              <el-table-column label="标题" prop="title"> </el-table-column>
              <el-table-column  width="180" align="center" label="类别">
                <template #default="scope">
                  <el-tag :type="'success'">
                  {{'未分类' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column align="right" fixed="right" width="250">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="按标题、编号搜索"
                  >
                  <el-button @click.native="vague_Search('nous')" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,'nous')" icon="el-icon-edit">编辑</el-button>
                   <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row,'nous')" icon="el-icon-delete"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalNous" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
        </el-tab-pane>
        <el-tab-pane label="试题资讯" name="fifth">
           <el-table
              :data="
                testList
              "
              style="width: 100%"
              max-height="400"
              border
            >
              <el-table-column fixed label="编号" prop="id"> </el-table-column>
              <el-table-column label="标题" prop="title"> </el-table-column>
              <el-table-column  width="180" align="center" label="类别">
                <template #default="scope">
                  <el-tag v-for="(item,index) in scope.row.tag" :key="index"  :type="'success'">
                  {{ item!='' ? item :'未分类' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column align="right" fixed="right" width="250">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="按标题、编号、类别搜索"
                  >
                  <el-button @click.native="vague_Search('test')" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,'test')" icon="el-icon-edit">编辑</el-button>
                   <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row,'test')" icon="el-icon-delete"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalTest" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
        </el-tab-pane>
        <el-tab-pane label="学校资讯" name="sixth">
           <el-table
              :data="
                schoolList
              "
              style="width: 100%"
              max-height="400"
              border
            >
              <el-table-column fixed label="编号" prop="id"> </el-table-column>
              <el-table-column label="学校" prop="school"> </el-table-column>
              <el-table-column align="center" label="缩略图">
                <template #default="scope">
                        <el-image
                            class="table-td-thumb"
                            :src="scope.row.school_img"
                            :preview-src-list="[scope.row.school_img]"
                        ></el-image>
                </template>
              </el-table-column>
              <el-table-column  width="180" align="center" label="类别">
                 <template #default="scope">
                  <el-tag v-for="(item,index) in scope.row.tag" :key="index"  :type="'success'">
                  {{ item!='' ? item :'未分类' }}
                  </el-tag>
                </template>
              </el-table-column>
              <el-table-column align="right" fixed="right" width="250">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="按校名、编号、类别搜索"
                  >
                  <el-button @click.native="vague_Search('school')" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,'school')" icon="el-icon-edit">编辑</el-button>
                   <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row,'school')" icon="el-icon-delete"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalSchool" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
        </el-tab-pane>
        <el-tab-pane label="系统公告" name="seventh">
            <el-table
             v-show="noticeList!=[]"
              :data="
                noticeList
              "
              style="width: 100%"
              max-height="400"
              border
            >
              <el-table-column fixed label="编号" prop="id"> </el-table-column>
              <el-table-column label="标题" prop="title"> </el-table-column>
              <el-table-column  width="180" align="center" label="其他">
            
              </el-table-column>
              <el-table-column align="right" fixed="right" width="250">
                <template slot="header" slot-scope="scope">
                  <el-input
                    v-model="search"
                    size="mini"
                    placeholder="按标题、编号搜索"
                  >
                  <el-button @click.native="vague_Search('notice')" slot="append" icon="el-icon-search"></el-button>
                  </el-input>
                </template>
                <template slot-scope="scope">
                  <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row,'notice')" icon="el-icon-edit">编辑</el-button>
                   <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row,'notice')" icon="el-icon-delete"
                    >删除</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="Paginationbox">
                 <MyPagination class="requirePagination" :total="totalNotice" :pageSize="10" layout="total, prev, pager, next" :isSmall="true" @getIndex="getPage"></MyPagination>
               </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
  </div>
  </div>
</template>

<script>
import { mapState,mapMutations } from "vuex";
import {getResourceCountBytype,getResourceBy_type_id,getResourceByKeyword,getResourceBytype} from "network/resource_manage"
import MyPagination from 'components/my_pagination/MyPagination'//分页
  export default {
    name:'resource_manage',
    data() {
      return {
        activeName: 'first',
        tabName:'first',//tabs名称
        search:'',//搜索内容
        realtimeList:[{title:'666'}],//实时资讯
        totalRealtime:100,//实时资讯总数
        realtimePage:1,//实时资讯分页
        policyList:[{title:'667'}],//政策资讯
        totalPolicy:100,//政策资讯总数
        policyPage:1,//政策资讯分页
        subjectList:[{id:'1',title:'668',tag:['小学','chuz','gz']}],//课程资讯
        totalSubject:100,//课程资讯总数
        subjectPage:1,//课程资讯分页
        nousList:[{title:'669'}],//百科常识
        totalNous:100,//百科常识总数
        nousPage:1,//百科常识分页
        testList:[{title:'660'}],//试题资讯
        totalTest:100,//试题资讯总数
        testPage:1,//试题资讯分页
        schoolList:[{title:'661'}],//学校资讯
        totalSchool:100,//学校资讯总数
        schoolPage:1,//学校资讯分页
        noticeList:[{title:'662'}],//系统公告
        totalNotice:100,//系统公告总数
        noticePage:1,//系统公告分页
      }
    },
     watch: {
    lateralNavanimate(newValue, oldValue) {
    this.$refs.rm_right.style.width = newValue+'vw';
    // this.$refs.rm_left.style.width = (newValue+78.5)+'vw';
    },
    padding_left(newV,oldV){
      this.$refs.rm_left.style.paddingLeft = newV+'vw';
      if(newV==2){
         this.$refs.rm_left.style.paddingLeft = '7vw'
      }

      console.log("newV:",newV)
    }
  },
  methods: {
    ...mapMutations(['changenavIndex','changePublicNav']),

    handleClick(tab, event) {//选项卡点击
        let that = this;
        that.search = ''
        console.log(tab, event);
        console.log("点击了：",tab.name)
        if(tab.name=='first'){
        that.tabName = 'first'
      }else if(tab.name=='second'){
        that.tabName = 'second'
      }else if(tab.name=='third'){
         that.tabName = 'third'
      }else if(tab.name=='fourth'){
         that.tabName = 'fourth'
      }else if(tab.name=='fifth'){
         that.tabName = 'fifth'
      }else if(tab.name=='sixth'){
         that.tabName = 'sixth'
      }else if(tab.name=='seventh'){
         that.tabName = 'seventh'
      }
      },
      getPage(index){//分页点击
      let that = this;
      let type = null;
      console.log("获取第"+index+"页的数据");
      if(that.tabName=='first'){
            type="realtimes" 
            getResourceBytype(type,index).then(res=>{
              that.realtimeList = res
            })
          }else if(that.tabName=='second'){
            type="policy"
            getResourceBytype(type,index).then(res=>{
              that.policyList = res
            })
          }else if(that.tabName=='third'){
            type="subject"
            getResourceBytype(type,index).then(res=>{
              that.subjectList = res
            })
          }else if(that.tabName=='fourth'){
             type="nous"
             getResourceBytype(type,index).then(res=>{
              that.nousList = res
            })
          }else if(that.tabName=='fifth'){
             type="test"
             getResourceBytype(type,index).then(res=>{
              that.testList = res
            })
          }else if(that.tabName=='sixth'){
             type="school"
             getResourceBytype(type,index).then(res=>{
              that.schoolList = res
            })
          }else if(that.tabName=='seventh'){
             type="notice"
             getResourceBytype(type,index).then(res=>{
              that.noticeList = res
            })
          }

      // let that = this;
      // that.studentPage = index;
      // getUserList(that.studentPage,type).then(res=>{
      //   console.log(res);
      // if(this.tabName=='first'){
      //   that.studentList = res;
      // }else if(this.tabName=='second'){
      //   that.teacherList = res;
      // }else{
      //   that.blackList = res;
      // }
      
      // })
    },
    // 编辑与删除
     handleEdit(index, row,type) {
        console.log("开始编辑："+type+"模块的内容",index, row);
        this.$router.push({ path:'/edit',query:{type:type,id:row._id}})
      },
      handleDelete(index, row,type) {
        let that = this;
        console.log("开始删除："+type+"模块的内容",index, row);
        this.$confirm('此操作将永久删除该资源, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
           if(that.tabName=='first'){
             that.realtimeList.splice(index,1)
          }else if(that.tabName=='second'){
             that.policyList.splice(index,1)
          }else if(that.tabName=='third'){
             that.subjectList.splice(index,1)
          }else if(that.tabName=='fourth'){
             that.nousList.splice(index,1)
          }else if(that.tabName=='fifth'){
             that.testList.splice(index,1)
          }else if(that.tabName=='sixth'){
             that.schoolList.splice(index,1)
          }else if(that.tabName=='seventh'){
             that.noticeList.splice(index,1)
          }
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      vague_Search(type){
        let that = this;
        console.log("开始对"+type+"进行模糊搜索")
        // type,keyWord
        getResourceByKeyword(type,that.search).then(res=>{
          if(type=='realtimes'){
            that.realtimeList = res
          }else if(type=='policy'){
            that.policyList = res
          }else if(type=='subject'){
            that.subjectList = res
          }else if(type=='nous'){
            that.nousList = res
          }else if(type=='test'){
            that.testList = res
          }else if(type=='school'){
            that.schoolList = res
          }else if(type=='notice'){
            that.noticeList = res
          }
        })
      }
  },
  computed: {
    ...mapState({
      lateralNavanimate: (state) => state.lateralNavanimate,
      padding_left: (state) => state.padding_left
    }),
  },
  mounted() {
    let that = this;
    // type,page 获取资源
    getResourceBytype("realtimes",1).then(res=>{
      that.realtimeList = res;
    })
    getResourceBytype("policy",1).then(res=>{
      that.policyList = res;
    })
    getResourceBytype("subject",1).then(res=>{
      that.subjectList = res;
    })
    getResourceBytype("nous",1).then(res=>{
      that.nousList = res;
    })
    getResourceBytype("test",1).then(res=>{
      that.testList = res;
    })
    getResourceBytype("school",1).then(res=>{
      that.schoolList = res;
    })
    getResourceBytype("notice",1).then(res=>{
      that.noticeList = res;
    })
    // 获取资源总数
    getResourceCountBytype("realtimes").then(res=>{
       if(res.status==200){
        that.totalRealtime = res.count;
      }
    })
    getResourceCountBytype("policy").then(res=>{
       if(res.status==200){
        that.totalPolicy = res.count;
      }
    })
    getResourceCountBytype("subject").then(res=>{
       if(res.status==200){
        that.totalSubject = res.count;
      }
    })
    getResourceCountBytype("nous").then(res=>{
       if(res.status==200){
        that.totalNous = res.count;
      }
    })
    getResourceCountBytype("test").then(res=>{
       if(res.status==200){
        that.totalTest = res.count;
      }
    })
    getResourceCountBytype("school").then(res=>{
       if(res.status==200){
        that.totalSchool = res.count;
      }
    })
    getResourceCountBytype("notice").then(res=>{
       if(res.status==200){
        that.totalNotice = res.count;
      }
    })
  },
  activated() {
    this.$refs.rm_left.style.paddingLeft = this.padding_left+'vw'
    if(this.padding_left==2){
    this.$refs.rm_right.style.width = (22-this.padding_left)+'vw'
    }
    this.changenavIndex(4);
  },

  components: { MyPagination},
  }
</script>

<style lang="less" scoped>
  .Paginationbox{
    position: relative;
    padding-top: 10px;
    padding-bottom: 10px;
    width: 100%;
    // background-color: black;
    height: 1.5rem;
    .requirePagination{
      position: absolute;
      left: 50%;
      transform: translateX(-200%);
    }
  }
.Rmanage {
  display: flex;
  width: 100vw;
  .rm_right{
    box-sizing: border-box;
  }
  .rm_left{
    position: relative;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    padding-left: 8vw;
    flex: 1;
    color: #505050;
    .rm_left_head {
      line-height: 2rem;
      h1 {
        font-size: 0.8rem;
      }
      position: absolute;
    }
    .rm_leftMain {
      margin-top: 2rem;
      background-color: #fff;
      padding-left: 2%;
      padding-right: 2%;
      width: 90%;
    }
  }
}
.table-td-thumb {
    display: block;
    margin: 0 auto;
    width: 40px;
    height: 40px;
}
/deep/.el-table__body-wrapper::-webkit-scrollbar {
  /*滚动条整体样式*/
  width : 10px;  /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
  }
  /deep/.el-table__body-wrapper::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius   : 10px;
  background-color: rgba(0, 0, 0, 0.1);
  background-image: -webkit-linear-gradient(
      45deg,
      rgba(255, 255, 255, 0.2) 25%,
      transparent 25%,
      transparent 50%,
      rgba(255, 255, 255, 0.2) 50%,
      rgba(255, 255, 255, 0.2) 75%,
      transparent 75%,
      transparent
  );
  }
  /deep/.el-table__body-wrapper::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
  background   : #ededed;
  border-radius: 10px;
  }
/deep/.el-tag{
  margin-right: 5px;
  margin-top: 5px;
}
</style>